<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
 
     <el-tab-pane label="仓库设置" name="first">
      <div class="app-container">
         <!-- 搜索框 -->
     <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="仓库名称" prop="name">
         <el-input
           v-model="queryParams.name"
           placeholder="请输入仓库名称"
           clearable
           @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="所在城市" prop="city">
         <el-input
           v-model="queryParams.city"
           placeholder="请输入所在城市"
           clearable
           @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="负责人" prop="personInCharge">
         <el-input
           v-model="queryParams.personInCharge"
           placeholder="请输入负责人"
           clearable
           @keyup.enter="handleQuery"
         />
       </el-form-item>
    
       <el-form-item>
         <el-button type="primary" icon="Search" @click="handleQuery" >搜索</el-button>
         <el-button icon="Refresh" @click="resetQuery" >重置</el-button>
       </el-form-item>
     </el-form>
     
       <!-- 操作按钮 -->
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
           type="primary"
           plain
           icon="Plus" circle
           @click="handleAdd"
           v-hasPermi="['warehouse:warehouse:add']"
         ></el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
           type="success"
           plain
           icon="Edit" circle
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['warehouse:warehouse:edit']"
         ></el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
           type="danger"
           plain
           icon="Delete" circle
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['warehouse:warehouse:remove']"
         ></el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
           type="warning"
           plain
           icon="Download" circle
           @click="handleExport"
           v-hasPermi="['warehouse:warehouse:export']"
         ></el-button>
       </el-col>
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
       <!-- 仓库列表表格 -->
     <el-table v-loading="loading" :data="warehouseList" @selection-change="handleSelectionChange">
      <el-table-column label="#" align="center" prop="id" type="index"/>
      <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="仓库名称" align="center" prop="name" />
       <el-table-column label="所在城市" align="center" prop="city" />
       <el-table-column label="详细地址" align="center" prop="address" />
       <el-table-column label="联系方式" align="center" prop="phone" />
       <el-table-column label="邮箱" align="center" prop="email" />
       <el-table-column label="负责人" align="center" prop="personInCharge" />
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
         <template #default="scope">
           <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
         </template>
       </el-table-column>
       <el-table-column label="创建人" align="center" prop="createBy" />
       <el-table-column label="是否有效" align="center" prop="status">
         <template #default="scope">
           <dict-tag :options="warehouse_status" :value="scope.row.status"/>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
           <el-button link type="primary"  @click="handleUpdate(scope.row)" v-hasPermi="['warehouse:warehouse:edit']">修改</el-button>
           <el-button link type="primary"  @click="handleDelete(scope.row)" v-hasPermi="['warehouse:warehouse:remove']">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
     
      <!-- 分页组件 -->
     <pagination
       v-show="total>0"
       :total="total"
       v-model:page="queryParams.pageNum"
       v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
 
       <!-- 添加或修改仓库设置对话框 -->
     <el-dialog :title="title" v-model="open" width="500px" append-to-body>
       <el-form ref="warehouseRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="仓库名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入仓库名称" />
         </el-form-item>
         <el-form-item label="所在城市" prop="city">
           <el-input v-model="form.city" placeholder="请输入所在城市" />
         </el-form-item>
         <el-form-item label="详细地址" prop="address">
           <el-input v-model="form.address" placeholder="请输入详细地址" />
         </el-form-item>
         <el-form-item label="联系方式" prop="phone">
           <el-input v-model="form.phone" placeholder="请输入联系方式" />
         </el-form-item>
         <el-form-item label="邮箱" prop="email">
           <el-input v-model="form.email" placeholder="请输入邮箱" />
         </el-form-item>
         <el-form-item label="负责人" prop="personInCharge">
           <el-input v-model="form.personInCharge" placeholder="请输入负责人" />
         </el-form-item>
         <el-form-item label="是否有效" prop="status">
           <el-radio-group v-model="form.status">
             <el-radio
               v-for="dict in warehouse_status"
               :key="dict.value"
               :label="parseInt(dict.value)"
             >{{dict.label}}</el-radio>
           </el-radio-group>
         </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="submitForm">确 定</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
       </template>
     </el-dialog>
      </div>
     </el-tab-pane>
 
     <el-tab-pane label="库区设置" name="second">
       <Area/>
     </el-tab-pane>
 
     <el-tab-pane label="库位设置" name="third">
      <Location />
     </el-tab-pane>

   </el-tabs>
 
 </template>
 
 <script setup name="Warehouse">
 import { listWarehouse, getWarehouse, delWarehouse, addWarehouse, updateWarehouse } from "@/api/warehouse/warehouse";
 import { ref } from 'vue';
 import Area from '@/views/warehouse/reservoirArea/index.vue';
 import Location from '@/views/warehouse/warehouseLocation/index.vue';
 
 
 // 定义响应式变量 activeName
 const activeName = ref('first');
 // 定义 handleClick 方法
 function handleClick(tab, event) {
   console.log(tab, event);
 }  
 
 
 const { proxy } = getCurrentInstance();
 const { warehouse_status } = proxy.useDict('warehouse_status');
 
 const warehouseList = ref([]);
 const open = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
 const ids = ref([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
 
 const data = reactive({
   form: {},
   queryParams: {
     pageNum: 1,
     pageSize: 10,
     name: null,
     city: null,
     personInCharge: null,
     status: null
   },
   rules: {
     name: [
       { required: true, message: "名称不能为空", trigger: "blur" }
     ],
     city: [
       { required: true, message: "所在城市不能为空", trigger: "blur" }
     ],
     address: [
       { required: true, message: "详细地址不能为空", trigger: "blur" }
     ],
     phone: [
       { required: true, message: "联系方式不能为空", trigger: "blur" }
     ],
     email: [
       { required: true, message: "邮箱不能为空", trigger: "blur" }
     ],
     personInCharge: [
       { required: true, message: "负责人不能为空", trigger: "blur" }
     ],
     status: [
       { required: true, message: "是否有效不能为空", trigger: "change" }
     ]
   }
 });
 
 const { queryParams, form, rules } = toRefs(data);
 
 /** 查询仓库设置列表 */
 function getList() {
   loading.value = true;
   listWarehouse(queryParams.value).then(response => {
     warehouseList.value = response.rows;
     total.value = response.total;
     loading.value = false;
   });
 }
 
 // 取消按钮
 function cancel() {
   open.value = false;
   reset();
 }
 
 // 表单重置
 function reset() {
   form.value = {
     id: null,
     name: null,
     city: null,
     address: null,
     phone: null,
     email: null,
     personInCharge: null,
     isDelete: null,
     createTime: null,
     updateTime: null,
     createBy: null,
     updateBy: null,
     status: null
   };
   proxy.resetForm("warehouseRef");
 }
 
 /** 搜索按钮操作 */
 function handleQuery() {
   queryParams.value.pageNum = 1;
   getList();
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
 }
 
 // 多选框选中数据
 function handleSelectionChange(selection) {
   ids.value = selection.map(item => item.id);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
 }
 
 /** 新增按钮操作 */
 function handleAdd() {
   reset();
   open.value = true;
   title.value = "添加仓库设置";
 }
 
 /** 修改按钮操作 */
 function handleUpdate(row) {
   reset();
   const _id = row.id || ids.value
   getWarehouse(_id).then(response => {
     form.value = response.data;
     open.value = true;
     title.value = "修改仓库设置";
   });
 }
 
 /** 提交按钮 */
 function submitForm() {
   proxy.$refs["warehouseRef"].validate(valid => {
     if (valid) {
       if (form.value.id != null) {
         updateWarehouse(form.value).then(response => {
           proxy.$modal.msgSuccess("修改成功");
           open.value = false;
           getList();
         });
       } else {
         addWarehouse(form.value).then(response => {
           proxy.$modal.msgSuccess("新增成功");
           open.value = false;
           getList();
         });
       }
     }
   });
 }
 
 /** 删除按钮操作 */
 function handleDelete(row) {
   const _ids = row.id || ids.value;
   proxy.$modal.confirm('是否确认删除仓库设置编号为"' + _ids + '"的数据项？').then(function() {
     return delWarehouse(_ids);
   }).then(() => {
     getList();
     proxy.$modal.msgSuccess("删除成功");
   }).catch(() => {});
 }
 
 /** 导出按钮操作 */
 function handleExport() {
   proxy.download('warehouse/warehouse/export', {
     ...queryParams.value
   }, `warehouse_${new Date().getTime()}.xlsx`)
 }
 
 getList();
 </script>
 
 
 